<template>
  <d2-container>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <div class="d2-breadcrumb">
        <el-breadcrumb-item>编辑房产</el-breadcrumb-item>
      </div>
    </el-breadcrumb>
    <el-form
      label-width="100px"
      :model="query"
      :rules="rules"
      ref="add"
      label-position="top"
    >
      <!-- card 1 -->
      <el-card>
        <div class="title-box">基本信息</div>
        <!-- row 1 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="所属园区Id" prop="gardenHomeId">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.gardenHomeId"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="楼号/单元号/房号" prop="roomNumber">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.roomNumber"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="房产格局" prop="pattern">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.pattern"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- row 2 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="房屋面积" prop="houseArea">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.houseArea"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="房屋类型" prop="houseType">
              <el-select v-model="query.houseType" placeholder="请选择">
                <el-option label="园区" :value="1"></el-option>
                <el-option label="写字楼" :value="2"></el-option>
                <el-option label="商铺" :value="3"></el-option>
                <el-option label="厂房" :value="4"></el-option>
                <el-option label="仓库" :value="5"></el-option>
                <el-option label="土地" :value="6"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="审核状态" prop="check_status">
              <el-select v-model="query.check_status" placeholder="请选择">
                <el-option label="待审核" :value="0"></el-option>
                <el-option label="审核通过" :value="1"></el-option>
                <el-option label="未通过" :value="2"></el-option>
                <el-option label="已屏蔽" :value="-1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- row 3 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="朝向" prop="orientation">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.orientation"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="层高" prop="storeyHeight">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.storeyHeight"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="地址(省)" prop="province">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.province"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- row 4 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="地址(市)" prop="city">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.city"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="地址(县/区)" prop="county">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.county"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="详细地址" prop="address">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.address"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="房产证" prop="is_enterprise">
          <img-upload
            tip="建议:图片小于1M"
            v-model="query._contentPicture1"
            :limit="1"
            listType="picture-card"
          ></img-upload>
        </el-form-item>
      </el-card>
      <!-- card 2 -->
      <el-card style="margin: 20px 0">
        <div class="title-box">房东信息</div>
        <!-- row 1 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="房东ID" prop="housingMasterId">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.housingMasterId"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="房东姓名" prop="is_enterprise">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.masterName"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="房东手机号">
              <el-input
                placeholder="请输入"
                type="text"
                v-model.trim="query.masterPhone"
                style="width: 80%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="房东身份证国徽面" prop="is_enterprise">
              <img-upload
                tip="建议:图片小于1M"
                v-model="query._contentPicture2"
                :limit="1"
                listType="picture-card"
              ></img-upload>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="房东身份证人像面" prop="is_enterprise">
              <img-upload
                tip="建议:图片小于1M"
                v-model="query._contentPicture3"
                :limit="1"
                listType="picture-card"
              ></img-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card style="margin: 20px 0">
        <div class="title-box">
          关联主账号
          <el-button
            type="text"
            class="add-btn"
            @click="query.relevance.push('')"
            >新增</el-button
          >
        </div>
        <div class="card-box">
          <el-form-item
            :label="`主账号UID ${index + 1}`"
            prop="is_enterprise"
            class="item-box"
            v-for="(item, index) in query.relevance"
            :key="index"
          >
            <el-button
              type="text"
              class="item-delete"
              @click="removeRelevance(index)"
              >删除</el-button
            >
            <el-input
              placeholder="请输入"
              type="text"
              v-model.trim="query.relevance[index]"
              style="width: 80%"
            ></el-input>
          </el-form-item>
        </div>
        <div class="flex-center">
          <el-button type="primary" @click="add">保存</el-button>
        </div>
      </el-card>
    </el-form>
  </d2-container>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      id: this.$route.params.id,
      query: {
        //关联信息
        relevance: [""],
      },
      rules: {
        gardenHomeId: [
          { required: true, message: "内容不能为空", trigger: "blur" },
        ],
        housingMasterId: [
          { required: true, message: "内容不能为空", trigger: "blur" },
        ],
        // roomNumber: [
        //   { required: true, message: "内容不能为空", trigger: "blur" },
        // ],
      },
    };
  },
  methods: {
    add() {
      this.$refs["add"].validate((valid) => {
        if (valid) {
          let params = {
            id: this.id,
            ...this.query,
          };
          if (
            this.query._contentPicture1 &&
            this.query._contentPicture1.length > 0
          ) {
            params.contentPicture1 = this.query._contentPicture1[0].url;
          }
          if (
            this.query._contentPicture2 &&
            this.query._contentPicture2.length > 0
          ) {
            params.contentPicture2 = this.query._contentPicture2[0].url;
          }
          if (
            this.query._contentPicture3 &&
            this.query._contentPicture3.length > 0
          ) {
            params.contentPicture3 = this.query._contentPicture3[0].url;
          }
          console.log("提交内容：", params);
          this.$axios.post("/wxHousingAssess/update", params).then((result) => {
            console.log("响应", result);
            if (result.data == 1) {
              this.$message.success("操作成功");
              this.$router.push("/house");
              this.$refs["add"].resetFields();
            } else {
              this.$message.error(result.data.msg);
            }
          });
        } else {
          return false;
        }
      });
    },
    //删除
    removeRelevance(index) {
      this.query.relevance.splice(index, 1);
    },
    getInfo() {
      this.$axios
        .post("/wxHousingAssess/getInfo", { id: this.id })
        .then((result) => {
          if (result) {
            this.query = {
              ...result.data,
              ...this.query,
              _contentPicture1: [{ url: result.data.contentPicture1 }],
              _contentPicture2: [{ url: result.data.contentPicture2 }],
              _contentPicture3: [{ url: result.data.contentPicture3 }],
            };
          } else {
            this.$message.error(result.data.msg);
          }
        });
    },
  },
  mounted() {
    this.getInfo();
  },
};
</script>

<style scoped lang="scss">
.item-box {
  position: relative;
  width: 30%;
  .item-delete {
    position: absolute;
    right: 80px;
    top: -45px;
  }
}
.card-box {
  display: flex;
  flex-wrap: wrap;
}
</style>
